<template>
  <div class="tool-menu">
    <div class="home-btn items-center" @click="goHome">
      <div class="mmt-home-title">
        智能训练与验证子系统
      </div>
      <!-- <span>
        <svg-icon style="color: var(--app-primary-base);" icon-class="home1" width="40" height="40" />
      </span>
      <div class="mmt-home-logo" style="width: 40px; height: 40px">
        <span role="img" class="appIcon" style="font-size: 24px">
          <svg-icon icon-class="home" width="24" height="24" />
        </span>
      </div> -->
    </div>
    <div
      style="background-color: var(--app-nav-bg); margin: 0 10px;padding: 10px;height: calc(100% - 68px);overflow-x:hidden;overflow-y: auto;border: 1px solid var(--ui-border-color-base); border-radius: 10px;">
      <a class="mmt-menu-item flex flex-col justify-center items-center" v-for="menu in menuList" :key="menu.id"
        :class="{ 'mmt-menu-item-selected': currentMenu.id == menu.id }" @click="handleChangeMenu(menu)">
        <!-- <span role="img" class="appIcon menu-icon">
        <svg-icon :icon-class="menu.icon" :class="{ 'mmt-menu-item-selected': currentMenu.id == menu.id }" width="20"
          height="20" />
      </span> -->
        <span style="text-align: center">{{
          $t("tool.leftMenu." + menu.nameEn)
        }}</span>
      </a>
    </div>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
    };
  },
  props: {
    menuList: {
      type: Array,
    },
  },
  computed: {
    ...mapState({
      currentMenu: (state) => state.homePage.currentMenu,
    }),
  },
  created() {
    // 考虑刷新停留当前菜单
    if (this.menuList.filter((item) => item.nameEn == this.currentMenu.nameEn).length == 0) {
      this.$store.commit("homePage/SET_CURRENT_MENU", this.menuList[0]);
    }
  },
  methods: {
    // 返回首页
    goHome() {
      this.$router.push({
        path: "/",
      })
    },
    // 点击切换菜单
    handleChangeMenu(menu) {
      this.$store.commit("homePage/SET_CURRENT_MENU", menu);
      this.$router.push({ name: menu.nameEn });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/themeConfig/themeConfig.scss";

.tool-menu {
  margin-bottom: 1rem;
  width: 100%;
  height: 100%;
  // padding-top: 50px;

  .home-btn {
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;

    >span {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      border-radius: 14px;
      border: none;
      background: 0 0;
      box-sizing: border-box;
      color: #fff;
      white-space: nowrap;
      text-align: center;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .mmt-home-title {
      text-align: center;
      height: 40px;
      font-size: 20px;
      color: var(--ui-text-color);
      line-height: 40px;
      background: linear-gradient(to bottom, #002c55 0%, #0080c0 100%)
    }

    .mmt-home-logo {
      opacity: 0;
      position: absolute;
      background-color: var(--ui-component-background);
      border-radius: 14px;
      padding: 8px;
      transition: opacity 0.3s ease-in-out;
      box-shadow: 0 0 2px #00000029;

      &:hover {
        opacity: 1;
      }
    }
  }

  .mmt-menu-item {
    width: 260px;
    height: 45px;
    color: var(--ui-text-color);
    background-color: var(--ui-component-background);
    border: 1px solid var(--ui-border-color-base);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 16.8px;

    .menu-icon {
      width: 20px;
      height: 20px;
      margin-bottom: 6px;
      font-size: 20px;
    }
  }

  .mmt-menu-item:hover,
  .mmt-menu-item-selected {
    background-color: var(--app-primary-base);
  }

  .mmt-logo {
    position: absolute;
    width: 72px;
    top: 577px;
    height: calc(-580px + 100vh);
    pointer-events: none;
  }
}
</style>